<template>
  <div class="hello">
    <p>
      <el-button @click="setIsLogin(true)" type="primary" plain>改变vuex数值:{{isLogin}}</el-button>
    </p>
    <p>完整的请求封</p>
    <button @click="getMockExp">MOCK的get请求,不规则网址测试</button>
    <button @click="getMock">MOCK的get请求</button>
    <p>getInfo:{{getInfo}}</p>
    <button @click="postMockExp">MOCK的post请求,不规则网址测试</button>
    <button @click="postMock">MOCK的post请求</button>
    <p>postInfo:{{postInfo}}</p>
    <button @click="putMockExp">MOCK的put请求,不规则网址测试</button>
    <button @click="putMock">MOCK的put请求</button>
    <p>putInfo:{{putInfo}}</p>
    <button @click="deleteMockExp">MOCK的delete请求,不规则网址测试</button>
    <button @click="deleteMock">MOCK的delete请求</button>
    <p>deleteInfo:{{deleteInfo}}</p>
  </div>
</template>

<script>
import {mapGetters, mapActions} from 'vuex'

export default {
  name: 'HelloWorld',
  data () {
    return {
      getInfo: '没有请求',
      postInfo: '没有请求',
      putInfo: '没有请求',
      deleteInfo: '没有请求'
    }
  },
  computed: {
    ...mapGetters(['isLogin'])
  },
  methods: {
    ...mapActions(['setIsLogin']),
    async getMock () {
      let [data, err] = await window._https.get.test({
        headers: {},
        params: {'userName': '大名', 'userPassword': '123456.'}
      })
      console.log('err', err)
      this.getInfo = data
    },
    async getMockExp () {
      // 字符串模板，参数为数组
      let [data, error] = await window._https.get.testArray({params: {
        'userName': '大名',
        'userPassword': '123456.'
      }}, ['sss', 'demo', 'demo2222'])
      if (error) {
        console.log('error', error.response.status)
        console.log('err', error.response.statusText)
      }
      this.getInfo = data
      // 字符串模板，参数为对象
      let [data1, error1] = await window._https.get.testMap({params: {
        'userName': '大名',
        'userPassword': '123456.'
      }}, {key1: 'sss', key2: 'demo', key3: 'demo2222'})
      if (error1) {
        console.log('error', error1.response.status)
        console.log('err', error1.response.statusText)
      }
      this.getInfo = data1
    },
    async postMock () {
      let [data, err] = await window._https.post.test({'userName': '大名', 'userPassword': '123456.'})
      console.log('err', err)
      this.postInfo = data
    },
    async postMockExp () {
      var [data, err] = await window._https.post.testExp(null, ['demo02'])
      console.log('err', err)
      this.postInfo = data
      var result = await window._https.post.testExp(null, ['demo01'])
      console.log('结果', result)
    },
    async putMock () {
      let [data, err] = await window._https.put.test({'userName': '大名', 'userPassword': '123456.'})
      console.log('err', err)
      this.putInfo = data
    },
    async putMockExp () {
      let [data, err] = await window._https.put.testExp(null, ['demo01'])
      console.log('err', err)
      this.putInfo = data
      let result = await window._https.put.testExp(null, ['demo02'])
      console.log('err', result)
    },
    async deleteMock () {
      let [data, err] = await window._https.delete.test({data: {'userName': '大名', 'userPassword': '123456.'}})
      console.log('err', err)
      this.deleteInfo = data
    },
    async deleteMockExp () {
      let [data, err] = await window._https.delete.testExp(null, ['demo01'])
      console.log('err', err)
      this.deleteInfo = data
    }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>
